<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    th,
    td {
      padding: 10px 20px;
      text-align: center;
    }

    #pre,
    #next {
      padding: 10px;
      background-color: pink;
      cursor: pointer;
    }

    #pre,
    #next,
    #pages {
      float: left;
    }

    #pages div {
      float: left;
      padding: 10px;
      margin: 0 10px;
      background-color: pink;
      cursor: pointer;
    }

    #xiugaikuang {
      position: absolute;
      top: 100px;
      left: 50%;
      padding: 20px;
      border: 1px solid red;
      background-color: gray;
      display: none;
    }
  </style>
</head>

<body>
  <div id="mainDiv">
    <table border="1">
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
    <div id="xiugaikuang">
      <form action="">
        <label>学号：<input type="text" id="stuId" disabled></label>
        <br>
        <label>学生姓名：<input type="text" id="stuName"></label>
        <br>
        <label>学生性别：<input type="text" id="stuSex"></label>
        <br>
        <label>学生年龄：<input type="text" id="stuAge"></label>
        <br>
        <button type="button" id="querenxiugai">确定修改</button>
        <button type="button" id="quxiao">取消</button>
      </form>
    </div>
    <div>
      <div id="pre">上一页</div>
      <div id="pages">
        <!-- <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div> -->
      </div>
      <div id="next">下一页</div>
    </div>
  </div>

  <script src="./jquery-1.11.3.js"></script>
  <script>
    //模拟假数据
    let student = [{
        id: 1,
        name: "张三",
        sex: "女",
        age: 18
      },
      {
        id: 2,
        name: "王五",
        sex: "女",
        age: 18
      },
      {
        id: 3,
        name: "哈哈",
        sex: "女",
        age: 18
      },
      {
        id: 4,
        name: "赵四",
        sex: "女",
        age: 18
      },
      {
        id: 5,
        name: "赵六",
        sex: "女",
        age: 18
      },
      {
        id: 6,
        name: "王一",
        sex: "女",
        age: 18
      },
      {
        id: 7,
        name: "说的",
        sex: "女",
        age: 18
      },
      {
        id: 8,
        name: "赵六",
        sex: "女",
        age: 18
      },
      {
        id: 9,
        name: "赵六",
        sex: "女",
        age: 18
      },
      {
        id: 10,
        name: "说的",
        sex: "女",
        age: 18
      },
      {
        id: 11,
        name: "说的",
        sex: "女",
        age: 18
      },
      {
        id: 12,
        name: "赵六",
        sex: "女",
        age: 18
      },
      {
        id: 13,
        name: "家人",
        sex: "女",
        age: 18
      },
      {
        id: 14,
        name: "家人",
        sex: "女",
        age: 18
      },
      {
        id: 15,
        name: "说的",
        sex: "女",
        age: 18
      },
      {
        id: 16,
        name: "上三",
        sex: "女",
        age: 18
      },
      {
        id: 17,
        name: "说的",
        sex: "女",
        age: 18
      },
      {
        id: 18,
        name: "上三",
        sex: "女",
        age: 18
      },
      {
        id: 19,
        name: "赵六",
        sex: "女",
        age: 18
      },
      {
        id: 20,
        name: "家人",
        sex: "女",
        age: 18
      },
      {
        id: 21,
        name: "赵六",
        sex: "女",
        age: 18
      },
      {
        id: 22,
        name: "上三",
        sex: "女",
        age: 18
      },
    ];

    let nowPage = 1;
    let maxPage;
    //动态渲染表格
    function showTbody(start, end, tbodyData) {
      $('#mainDiv>table>tbody').html('');
      //目的 --->往tbody中添加tr和td
      for (let i = start; i <= end; i++) {
        //判断是否是最后一页
        if (tbodyData.length > i) {
          $('#mainDiv>table>tbody').append(`
            <tr>
              <td>${tbodyData[i].id}</td>
              <td>${tbodyData[i].name}</td>
              <td>${tbodyData[i].sex}</td>
              <td>${tbodyData[i].age}</td>
              <td class="btn">
                <button class="xiugai" data-id=${tbodyData[i].id}>修改</button>
                <button class="shanchu" data-id=${tbodyData[i].id}>删除</button>
              </td>
            </tr>
          `)
        }
      }
    }



    //   $('#stuId').val(mydata[0].id)
    //   $('#stuName').val(mydata[0].name)
    //   $('#stuSex').val(mydata[0].sex)
    //   $('#stuAge').val(mydata[0].age)
    // })
    // $('#querenxiugai').click(function () {
    //   //获取表单里的数据
    //   let obj = {
    //     id: parseInt($('#stuId').val()),
    //     name: $('#stuName').val(),
    //     sex: $('#stuSex').val(),
    //     age: $('#stuAge').val()
    //   }








    //渲染页码
    function showPage() {
      //知道有多少页---一页展示5条数据
      let pageNum = Math.ceil(student.length / 5);
      maxPage = pageNum;
      for (let i = 0; i < pageNum; i++) {
        //往pages中添加页码
        $('#pages').append(`<div>${i + 1}</div>`)
      }
      //渲染tbody
      showTbody(0, 4, student)
    }
    //---------初始化
    showPage();
    //-------------------------------------------------
    $('#next').click(function () {
      //渲染当前页的下一页的数据
      //知道当前页-----下一页 当前页++
      let page;
      nowPage < maxPage ? page = nowPage + 1 : page = nowPage;
      let start = (page - 1) * 5;
      let end = page * 5 - 1;
      showTbody(start, end, student);
      nowPage = page;
    })

    $('#pre').click(function () {
      //渲染当前页的上一页的数据
      //知道当前页-----上一页 当前页--
      let page;
      nowPage > 1 ? page = nowPage - 1 : page = nowPage;
      let start = (page - 1) * 5;
      let end = page * 5 - 1;
      showTbody(start, end, student);
      nowPage = page;
    })

    //--------页码翻页：事件委托----------
    $('#pages').on('click', 'div', function () {
      //渲染对应页号码的数据
      //1.1获取当前点击的页码
      let page = parseInt($(this).text());
      //1.2根据当前号码计算起始结束的位置
      let start = (page - 1) * 5;
      let end = page * 5 - 1;
      //1.3渲染表格
      showTbody(start, end, student);
      //1.4更新nowpage
      nowPage = page;
    })



    // 删除
    $('#mainDiv>table>tbody').on('click', '.shanchu', function () {
      let stuId = parseInt($(this).attr('data-id'));
      student = student.filter(item => {
        return item.id !== stuId
      })
      $('#pages').html('')
      showPage();
      let page;
      nowPage < maxPage ? page = nowPage : page = nowPage;
      let start = (page - 1) * 5;
      let end = page * 5 - 1;
      showTbody(start, end, student);
    })






    //-------------------修改
    $('tbody').on('click', '.xiugai', function () {
      //1.修改框显示
      $('#xiugaikuang').css({
        display: 'block'
      });
      //2.将当前的这条修改信息展示在我的div上（回显）
      let stuId = parseInt($(this).attr('data-id'));
      // for(let i=0;i<student.length;i++){
      //   if(student[i].id === stuId){
      //     $('#stuId').val(student[i].id)
      //     $('#stuName').val(student[i].name)
      //     $('#stuSex').val(student[i].sex)
      //     $('#stuAge').val(student[i].age)
      //   }
      // }
      //筛选器
      let mydata = student.filter(item => {
        return item.id === stuId
      })
      $('#stuId').val(mydata[0].id)
      $('#stuName').val(mydata[0].name)
      $('#stuSex').val(mydata[0].sex)
      $('#stuAge').val(mydata[0].age)
    })

    $('#querenxiugai').click(function () {
      //获取表单里的数据
      let obj = {
        id: parseInt($('#stuId').val()),
        name: $('#stuName').val(),
        sex: $('#stuSex').val(),
        age: $('#stuAge').val()
      }
      //讲这些数据和student数据中的对应那条互换（替换）
      for (let i = 0; i < student.length; i++) {
        if (student[i].id === obj.id) {
          student.splice(i, 1, obj);
        }
      }
      //清空表单，关闭div
      $('#stuId').val('')
      $('#stuName').val('')
      $('#stuSex').val('')
      $('#stuAge').val('')
      //属性表格
      let start = (nowPage - 1) * 5;
      let end = nowPage * 5 - 1;
      showTbody(start, end, student);
      $('#xiugaikuang').css({
        display: 'none'
      })
    })
    $('#quxiao').click(function () {
      $('#stuId').val('')
      $('#stuName').val('')
      $('#stuSex').val('')
      $('#stuAge').val('')
      $('#xiugaikuang').css({
        display: 'none'
      })
    })
  </script>
</body>

</html>